<template>
  <div class="recreation-container" style="background: #fff;padding-top: 11px">
    <div class="input">
      <div class="inputLeft">
        <img class="logoTop" src="../../img/zoomout-outlined@2x.png"/>
        <input v-model="userName" type="text" placeholder="请输入查询"/>
      </div>
      <div class="inputRight" @click="show = true">
        <img class="logoTop" src="../../img/sx.png"/>
        筛选
      </div>
    </div>
    <!--    <van-cell is-link title="基础用法" />-->
    <van-action-sheet v-model:show="show" title="订单筛选">
      <div class="content">
        <div class="contenttitle">时间订单</div>
        <div class="contentCenter"><span>近1个月</span><span>近3个月</span><span>近6个月</span></div>
        <div class="contentCentertiem"><span @click="showtime = true,box=1">{{ time1 }}</span>
          <div>-</div>
          <span @click="showtime = true,box=2">{{ time2 }}</span></div>
        <div class="contenttitle">订单号查询</div>
        <div class="contenttitleorder">
          <img class="logoTop" src="../../img/zoomout-outlined@2x.png"/>
          <input v-model="userName" type="text" placeholder="请输入查询"/>
        </div>

        <div class="contenttitle">门店查询</div>
        <div class="contenttitleorder">
          <img class="logoTop" src="../../img/zoomout-outlined@2x.png"/>
          <input v-model="userName" type="text" placeholder="请输入查询"/>
        </div>

        <div class="contenttitle">会员卡号查询</div>
        <div class="contenttitleorder">
          <img class="logoTop" src="../../img/zoomout-outlined@2x.png"/>
          <input v-model="userName" type="text" placeholder="请输入会员卡号"/>
        </div>

        <div class="centerbootom">
          <img src="../../img/cz.png"/>
          <img src="../../img/qr.png"/>
        </div>
      </div>
    </van-action-sheet>

    <van-action-sheet v-model:show="showtime">
      <van-date-picker
        v-model="currentDate"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-action-sheet>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" style="background: #F5F6F7;position: none">
          <div class="card" @click="showtk = true">
            <div class="cardTitle">订单号：PE120380279472910</div>
            <div class="cardCenter">
              <div class="cardCenterNeer">
                <div class="cardLeft">产品名称</div>
                <div class="cardRight">圣诞圣诞圣诞</div>
              </div>
              <div class="cardCenterNeer">
                <div class="cardLeft">实付金额</div>
                <div class="cardRight">120</div>
              </div>
              <div class="cardCenterNeer">
                <div class="cardLeft">门店名称</div>
                <div class="cardRight">长宁区店铺</div>
              </div>
              <div class="cardCenterNeer">
                <div class="cardLeft">订单时间</div>
                <div class="cardRight">2024-12-01 12:00:00</div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
  <van-popup
    v-model:show="showtk"
    position="bottom"
    :style="{ height: '100%' }"
    closeable
    @click-overlay="onClickOverlay"
    @click-close-icon="onClickCloseIcon" style="background: rgb(245, 246, 247);"
  >
    <div class="order" style="background: #F5F6F7;">
      <div class="orderTitle" style="margin: 50px 16px 19px;">
        <div class="orderTitleCenter">
          <img class="logoTop" src="../../img/xz.png"/>
          <span>订单信息</span>
        </div>
        <div class="orderTitleinner"><span class="orderTitleinnerleft">订单号</span><span class="orderTitleinnerright">PE120380279472910</span></div>
        <div class="orderTitleinner"><span class="orderTitleinnerleft">实付金额</span><span class="orderTitleinnerright">300</span></div>
        <div class="orderTitleinner"><span class="orderTitleinnerleft">订单时间</span><span class="orderTitleinnerright">2024-12-01 12:00:00</span></div>
      </div>
      <div class="orderTitle">
        <div class="orderTitleCenter">
          <img class="logoTop" src="../../img/cp.png"/>
          <span>产品信息</span>
        </div>
        <div class="orderTitleinner"><span class="orderTitleinnerleft">产品名称</span><span class="orderTitleinnerright">圣诞圣诞圣诞</span></div>
        <div class="orderTitleinner"><span class="orderTitleinnerleft">产品数量</span><span class="orderTitleinnerright">10</span></div>
        <div class="orderTitleinner"><span class="orderTitleinnerleft">产品总价</span><span class="orderTitleinnerright">300</span></div>
        <div class="orderTitleinner"><span class="orderTitleinnerleft">门店名称</span><span class="orderTitleinnerright">长宁区店铺</span></div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {

  mounted() {
    console.log(html)
    document.title = '订单列表'; // 修改页面标题
  },
  setup() {
    const showtk = ref(false);
    const onClickOverlay = () => {
      // showToast('click-overlay');
    };
    const onClickCloseIcon = () => {
      // showToast('click-close-icon');
    };
    const box = 1;
    const show = ref(false);
    const time1 = ref('开始时间')
    const time2 = ref('结束时间')
    const onSelect = (item) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      show.value = false;
      showToast(item.name);
    };
    const showtime = ref(false);
    const onSelectTime = (item) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      show.value = false;
      showToast(item.name);
    };
    const currentDate = ref(['2024', '12', '01']);
    //下拉列表
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;
        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };
    return {
      box,
      showtime,
      onSelectTime,

      show,
      onSelect,

      list,
      onLoad,
      loading,
      finished,
      onRefresh,
      refreshing,

      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,

      time1,
      time2,

      showtk,
      onClickOverlay,
      onClickCloseIcon,
    };
  },
  methods: {
    onConfirm(value) {
      var that = this;
      console.log('用户选择的日期：', value);
      console.log(this.box)
      if (this.box == 1) {
        that.time1 = value.selectedValues[0] + '-' + value.selectedValues[1] + '-' + value.selectedValues[2]
      } else {
        that.time2 = value.selectedValues[0] + '-' + value.selectedValues[1] + '-' + value.selectedValues[2]
      }
      this.showtime = false
    },
    onCancel() {
      this.showtime = false
      console.log(this.box)
      console.log('用户取消了日期选择');
    }
  },
}
</script>

<style scoped lang="less">
.content {
  border-top: 1px solid #E9E9E9;

  .contenttitle {
    margin: 14px 16px 7px;
    background: #FFFFFF;
    border-radius: 27px 27px 0px 0px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }

  .centerbootom {
    display: flex;
    margin: 36px 16px 47px;

    img {
      width: 50%;
    }
  }

  .contentCentertiem {
    display: flex;
    margin: 0 18px 18px;
    justify-content: space-between;

    div {
      color: #333;
      text-align: left;
      font-style: normal;
      padding: 6px 0px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
    }

    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      width: 44%;
      border-radius: 6px;
      color: #333;
      text-align: center;
      font-style: normal;
      background: #F4F4F4;
      padding: 6px 24px;

    }
  }

  .contentCenter {
    display: flex;
    margin: 0 18px 9px;
    justify-content: space-between;

    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      width: 31%;
      border-radius: 6px;
      color: #333333;
      text-align: left;
      font-style: normal;
      background: #F4F4F4;
      padding: 6px 24px;
    }
  }

  .contenttitleorder {
    display: flex;
    width: 75%;
    align-items: center;
    background: #F4F4F4;
    padding: 7px;
    margin: 0px 16px 0px;
    border-radius: 4px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }

    input {
      width: 100%;
      height: 100%;
      border: none;
      padding-top: 2px;
      background: #F4F4F4;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }
}

.van-cell {
  position: initial !important;
}

.van-back-top {
  background-color: #FFA300 !important;
}

.recreation-container {
  .van-list {
    background: #F5F6F7;
  }

  .inputLeft {
    display: flex;
    width: 75%;
    align-items: center;
    background: #F4F4F4;
    padding: 7px;
    margin: 0px 16px 0px;
    border-radius: 19px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }

  .inputRight {
    //width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    line-height: 17px;
    text-align: left;
    font-style: normal;

    img {
      width: 14px;
      height: 15px;
    }
  }

  .input {
    margin-bottom: 11px;
    display: flex;
    align-items: flex-end;
    height: 100%;
    //border-bottom: 1px solid @border-color-01;
    font-size: 14px;


    input {
      width: 100%;
      height: 100%;
      border: none;
      padding-top: 2px;
      background: #F4F4F4;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }

  .card {
    //margin: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .cardTitle {
      background: linear-gradient(270deg, rgba(255, 245, 226, 0) 0%, #FFF5E2 100%);
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      padding: 13px 12px;
    }

    .cardCenter {
      padding-bottom: 14px;
    }

    .cardCenterNeer {
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin: 10px 12px;
    }

    .left {
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 5px;
      background-color: pink;
      margin-right: 10px;
    }

  }
}
.order{
  .orderTitle{
    background: #fff;
    margin: 19px 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.42667rem;
    color: #333333;
    font-style: normal;
    padding-bottom: 16px;
    .orderTitleCenter{
      padding:12px 15px;
      border-bottom:1px solid #E9E9E9;
      display: flex;
      align-items: center;
      line-height: 0.58667rem;
      text-align: left;
      img{
        width: 13px;
        height: 15px;
        margin-right: 6px;
      }
    }
    .orderTitleinner{
      margin: 12px 12px 0px;
      display: flex;
      align-items: center;
      .orderTitleinnerleft{
        width: 30%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
      .orderTitleinnerright{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>
